<template>
  <!--模板-->
  <h1> ref （数组） 失去响应性的各种情况 </h1>
  person：{{ person }}<br>
  <el-button type="" @click="change1">直接赋值 ref.value</el-button><br>
  <el-button type="" @click="change2">ref.value[0]</el-button><br>

  <hr>
  <!--
  <son :listRef="arr"></son>-->
</template>


<script setup lang="ts" generic="T extends {name: string}">
  import { reactive, ref, watch } from 'vue'
  import son from './son1.vue'

  const person = ref({
    name: 'jyk'
  })

  let index = 0
  // 只监听筐的变化，不管小米如何变
  watch(person, () => {
    console.log('watch person：', person)
  })

  // 手动深层监听，可以监听筐和小米
  watch(person, () => {
    console.log('手动深层 watch person：', person)
  },{deep:true})

  // 只监听 ref 自己，和筐、小米都无关
  watch(() => person, () => {
    console.log('watch () => person：', person)
  })
  
  // 一开始能监听苹果，ref.value = [] 后，就不能监听苹果了。
  watch(person.value, () => {
    console.log('watch person.value：', person)
  })

  // 手动监听筐，不是深层
  watch(() => person.value, () => {
    console.log('watch () => person.value：', person)
  })
  // 深层的监听，都有
  watch(() => person.value, () => {
    console.log('手动深层 watch () => person.value：', person)
  },{deep:true})


  const change1 = () => {
    person.value = {name: 'jyk9999' + index++}
  }

  const change2 = () => {
    person.value.name = 'jyk3333' + index++

  }

</script>